<template>
  <div class="demo-collapse">
    <el-collapse v-model="activeNames" @change="handleChange" accordion>
      <!-- 面板 1: Consistency - 表格 -->
      <el-collapse-item name="1">
        <template #title>
          <div style="font-size: 16px">旋转螺母-组合变径接头 基本信息规范</div>
        </template>
        <xcmg-table
          :data="base_attr_infoData"
          style="width: 100%"
          max-height="400"
          border
        >
          <!-- 固定列 -->
          <el-table-column label="中文名称(规范库)" min-width="120">
            <template #default="{ row }">{{ row.name_cn }}</template>
          </el-table-column>

          <el-table-column label="英文名称(GDM)" min-width="180">
            <template #default="{ row }">{{ row.name_en }}</template>
          </el-table-column>

          <el-table-column label="业务定义及用途(规范库)" min-width="200">
            <template #default="{ row }">
              {{ row.business_definition }}
              <div>
                <template
                  v-if="
                    row.business_definition_pic_description &&
                    row.business_definition_images
                  "
                >
                  <el-text
                    type="primary"
                    style="cursor: pointer"
                    @click="handlePictureClick(row, 'definition')"
                  >
                    {{ row.business_definition_pic_description }}
                  </el-text>
                </template>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="业务规则(规范库)" min-width="220">
            <template #default="{ row }">
              {{ row.business_rule }}
              <div>
                <template
                  v-if="
                    row.business_rule_pic_description &&
                    row.business_rule_images
                  "
                >
                  <el-text
                    type="primary"
                    style="cursor: pointer"
                    @click="handlePictureClick(row, 'rule')"
                  >
                    {{ row.business_rule_pic_description }}
                  </el-text>
                </template>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="数据类型(GDM)"
            prop="column_name"
            min-width="100"
          />

          <el-table-column
            label="数据长度(GDM)"
            prop="length"
            min-width="100"
          />

          <el-table-column label="是否有允许值(GDM)" min-width="120">
            <template #default="{ row }">
              <el-button
                v-if="row.dict_data && row.dict_data.length > 0"
                type="primary"
                link
                @click="handleDictDataClick(row)"
              >
                是
              </el-button>
              <span v-else>否</span>
            </template>
          </el-table-column>
        </xcmg-table>
      </el-collapse-item>

      <!-- 面板 2: Feedback - 表格 -->
      <el-collapse-item name="2">
        <template #title>
          <div style="font-size: 16px">旋转螺母-组合变径接头 分类属性规范</div>
        </template>
        <xcmg-table
          :data="category_attr_infoData"
          :table-layout="fixed"
          max-height="400"
          border
        >
          <!-- 固定列 -->
          <el-table-column label="分类属性" min-width="120">
            <template #default="{ row }">{{ row.name }}</template>
          </el-table-column>

          <el-table-column label="属性英文名" min-width="180">
            <template #default="{ row }">{{ row.en_name }}</template>
          </el-table-column>

          <el-table-column label="属性描述" min-width="200">
            <template #default="{ row }">{{ row.description }}</template>
          </el-table-column>

          <el-table-column
            label="业务规则"
            prop="business_rule"
            min-width="100"
          />

          <el-table-column label="单位" prop="unit" min-width="100" />
          <el-table-column label="输入方式" prop="input_type" min-width="100" />
          <el-table-column label="值类型" prop="data_type" min-width="100" />

          <el-table-column label="是否有允许值(GDM)" min-width="120">
            <template #default="{ row }">
              <el-button
                v-if="row.dict_data && row.dict_data.length > 0"
                type="primary"
                link
                @click="handleDictDataClick(row)"
              >
                是
              </el-button>
              <span v-else>否</span>
            </template>
          </el-table-column>
        </xcmg-table>
      </el-collapse-item>
      <!-- 面板 3: 规范文件信息 - 链接 -->
      <el-collapse-item name="3">
        <template #title>
          <div style="font-size: 16px">规范文件信息</div>
        </template>
        <div v-for="item in informationData" class="linkTitle">
          <el-link
            :key="item.factory_name"
            type="primary"
            href="https://element-plus.org"
            target="_blank"
            >{{ item.name }}</el-link
          >
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
  <Carousel
    v-model:visible="CarVisible"
    :title="urlsTatle"
    :urlsData="urlsData"
  ></Carousel>
  <informationTable
    v-model:visible="infVisible"
    :data="currentTableData"
    title="信息表"
  ></informationTable>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import Carousel from "@/components/pullTable/Carousel.vue";
import informationTable from "./informationTable.vue";
import { useToggle } from "@/hooks/useToggle";
import {
  base_attr_info,
  category_attr_info,
  rule_files,
} from "@/api/pullTable";

const currentTableData = ref([]);
const urlsData = ref([]);
const urlsTatle = ref([]);

const [CarVisible, CarouselVisible] = useToggle();
const [infVisible, InformationTableVisible] = useToggle();

// 当前激活的面板
const activeNames = ref(["1"]);

const base_attr_infoData = ref([]);
const category_attr_infoData = ref([]);
const informationData = ref([]);

const fetchBaseAttrInfo = async () => {
  try {
    const response = await base_attr_info({});
    if (response && response.data) {
      base_attr_infoData.value = response.data;
    }
  } catch (error) {
    console.error("Error fetching base_attr_info:", error);
  }
};

const fetchCategoryAttrInfo = async () => {
  try {
    const response = await category_attr_info({ tree_code: "CATE2509050111" });
    if (response && response.data) {
      category_attr_infoData.value = response.data;
    }
  } catch (error) {
    console.error("Error fetching category_attr_info:", error);
  }
};

const fetchRuleFiles = async () => {
  try {
    const response = await rule_files({ tree_code: "CATE0000001" });
    if (response && response.data) {
      informationData.value = response.data;
    }
  } catch (error) {
    console.error("Error fetching rule_files:", error);
  }
};

const handlePictureClick = (row, type) => {
  let images = [];
  let description = "";

  if (type === "definition") {
    images = row.business_definition_images || [];
    description = row.business_definition_pic_description || "业务定义图片";
  } else if (type === "rule") {
    images = row.business_rule_images || [];
    description = row.business_rule_pic_description || "业务规则图片";
  }

  if (images.length > 0) {
    urlsData.value = images;
    urlsTatle.value = description;
    CarouselVisible();
  }
};

const handleDictDataClick = (row) => {
  // 将 dict_data 转为表格格式
  currentTableData.value = row.dict_data;
  InformationTableVisible();
};

const handelinformation = (row) => {
  currentTableData.value = row.table || [];
  InformationTableVisible();
};

// 切换回调
const handleChange = (val) => {
  console.log("active panels:", val);
};

// 自定义内容中的输入框示例
const inputValue = ref("");

onMounted(() => {
  fetchBaseAttrInfo();
  fetchCategoryAttrInfo();
  fetchRuleFiles();
});
</script>

<style scoped>
:deep(.el-button--primary.el-button) {
  padding: 0 !important;
}
.demo-collapse {
  margin: 16px;
}
.linkTitle {
  /* width: 100%; */
  margin-top: 10px;
}
</style>
